<template>
  <div class="users">
<!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" >
      <!-- <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item> -->
      <el-breadcrumb-item>报警组件</el-breadcrumb-item>
      <el-breadcrumb-item>历史报警</el-breadcrumb-item>
    </el-breadcrumb> 
<!-- 卡片式图 -->
<el-row >
<div class="box-row" >
  <div class="box-left">
    <el-link icon="el-icon-plus">导出</el-link>
  <el-link icon="el-icon-printer">打印</el-link>
  </div>
  <div class="box-right">
   水厂名称：
    
     <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  
    <el-link icon="el-icon-search" >查询</el-link>
  </div>
</div> 
<!-- 表格区 -->
 <el-table
    border
    ref="multipleTable"
    :data="tableData"
    style="width: 100%"
    :header-cell-style="{'text-align':'center'}"
    >
    <el-table-column
      type="selection"
      width="60"
      align='center'
      >
    </el-table-column>
    <el-table-column
      prop="uploadDate"
      label="报警日期"
      width="300"
      align='center'
      >
      
    </el-table-column>
    <el-table-column
      prop="time"
      label="报警时间"
      width="300"
      align='center'
      >
    </el-table-column>
    <el-table-column
      prop="text"
      label="报警文本"
       width="200"
       align='center'
    >
    </el-table-column>
    <el-table-column
      prop="address"
      label="报警点"
      width="300"
      align='center'
      >
    </el-table-column>
    <el-table-column
      prop="type"
      label="报警类型"
      width="200"
      align='center'
      >
    </el-table-column>
    <el-table-column
      prop="event"
      label="事件类型"
      width="200"
      align='center'
      >
    </el-table-column>
    <el-table-column
      prop="whether"
      label="是否确认"
      align='center'
      >
    </el-table-column>
    <el-table-column
      prop="settime"
      label="确认时间"
      align='center'
      >
    </el-table-column>
    <el-table-column
      prop="personnel"
      label="确认人员"
      align='center'
      >
    </el-table-column>
    
  </el-table>
 </el-row> 
    <el-pagination
      :page-sizes="[3, 5, 7, 9]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="10">
    </el-pagination>
     </div>
</template>

<script>
export default {
 data() {
      return {
        options: [{
          value: '选项1',
          label: '秋江水厂'
        }, {
          value: '选项2',
          label: '茅坦水厂'
        }, {
          value: '选项3',
          label: '牌楼水厂'
        }],
         value: '',
        tableData: [{
          time: '18:08:08',
          text: '2号泵站出水浊度偏高',
          address: "秋江水厂",
          type: "水质异常",
          event: "报警",
          personnel: "张三",
          uploadDate: "2020-08-10 ",
          whether:"是",
          settime:"2020-08-08"
          
     },
     {
          time: '18:08:08',
          text: '2号泵站出水浊度偏高',
          address: "秋江水厂",
          type: "水质异常",
          event: "报警",
          personnel: "张三",
          uploadDate: "2020-08-10 ",
          whether:"是",
          settime:"2020-08-08"
          
     }
     ],
        
      }
 },
 methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
}
</script>

<style lang="less" scoped>
.users{
  
   .el-breadcrumb{
     background-color: #E9EDF0 !important;
    height: 50px;
line-height: 50px;
font-size: 14px;
padding-left: 5px;
   }
 .el-row{
     background:rgb(91,146,211);
   

.box-row{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:rgb(91,146,211);
  color: #fff;
  box-sizing: border-box;

  .box-left{
    padding: 5px;
    .el-link{
padding: 15px;
color: #fff;
    }

  }
  .box-right{
padding-right: 10px;
// overflow：hidden
 input{
  
  height:25px;
}
.el-link{
  padding-left: 10px;
   color: #fff;
}

  }
}
   }
   
.el-pagination{
       background: rgb(241, 241, 241);
       margin: 5px;
     }
  
}
</style>